<template>
  <div class="dict-container common-container">
    <main-title>
      <el-button
        type="primary"
        size="small"
        class="btn-add"
        :disabled="!_state.currentData"
        @click="addContentInit"
        >创建</el-button
      >
    </main-title>
    <div class="content-wrap">
      <div class="search-wrap">
        <div class="common-search ym-box">
          <search-form
            v-model:form="_state.queryForm"
            :cls-options="_state.clsOptions"
            @search="search"
          />
        </div>
      </div>
      <el-row :gutter="20">
        <el-col :span="6">
          <div class="table-wrap dict-table ym-box">
            <ym-table
              v-loading="state.tableLoading"
              :height="tableHeight + 38"
              :data="state.tableData"
              :column-data="dictColumnData"
              :operator-show="false"
              @current-change="dictSelectionChange"
            >
              <template #name="{ row }">
                <div>{{ row.value }}</div>
                <div>{{ row.code }}</div>
              </template>
            </ym-table>
          </div>
        </el-col>
        <el-col :span="18">
          <div class="table-wrap ym-box">
            <ym-table
              v-loading="_state.contentTableLoading"
              :height="tableHeight"
              :data="_state.contentTableData"
              :column-data="dictContentColumnData"
            >
              <template #operator="slotProps">
                <el-button type="text" class="btn-edit" @click="editContentInit(slotProps.row)"
                  >修改</el-button
                >

                <el-button type="text" class="btn-del" @click="delContent(slotProps.row)"
                  >删除</el-button
                >
              </template>
            </ym-table>
            <pagination
              v-model:currentPage="_state.contentPageObj.pageNum"
              :total="_state.contentPageObj.total"
              @pagination="contentPageChange"
            />
          </div>
        </el-col>
      </el-row>
    </div>

    <!-- 创建或修改对话框 -->
    <drawer
      v-model:visible="state.dialogVisible"
      :size="600"
      :title="state.dialogTitle"
      @close="closeDrawer"
    >
      <template v-if="!_state.isContent">
        <add-or-edit-form
          ref="formWrapper"
          :form="_state.dictForm"
          :is-add="state.isAdd"
          :cls-options="_state.clsOptions"
          @cancel="handleClose"
          @confirm="confirm"
        />
      </template>
      <template v-else>
        <content-add-or-edit-form
          ref="formWrapper"
          :data="_state.currentData"
          :form="_state.dictContentForm"
          :is-add="state.isAdd"
          @cancel="handleClose"
          @confirm="confirmContent"
        />
      </template>
    </drawer>
  </div>
</template>

<script lang="ts" setup>
import { reactive, ref } from 'vue'

import AddOrEditForm from './components/AddOrEditForm.vue'
import ContentAddOrEditForm from './components/ContentAddOrEditForm.vue'
import SearchForm from './components/SearchForm.vue'

import DictApi from '@/api/backend/dict'

import { useTable } from '@/utils/common'
import { dictColumnData, dictContentColumnData } from '&/utils/columnData'

import { usePage } from '@/configs/pageObj'
import { commonHandle } from '@/views/mixins/common'
import tableOptions from '&/mixins/tableOptions'
import { Drawer, MainTitle, Pagination, YmTable } from '&/mixins/useComponent'
import IBaseObj from '#/index'

const { tableHeight } = useTable(tableOptions)

const { state, handleAdd, handleEdit, handleClose, handleDelete }: any = commonHandle()

const _state: IBaseObj = reactive({
  queryForm: {
    clsId: '',
  },
  clsOptions: [],
  contentTableData: [],
  contentTableLoading: false,
  isContent: false, // 是否是详情抽屉出现
  dictForm: {
    value: '',
    code: '',
    typeFk: '',
    status: 1,
    lockUp: false,
    remark: '',
  },
  dictContentForm: {
    value: '',
    valueOth1: '',
    valueOth2: '',
    lockUp: false,
    remark: '',
  },
  currentData: null,
  contentPageObj: usePage(),
})

const getDictClsData = async () => {
  const ret = await DictApi.getDictCls()
  _state.clsOptions = ret.data || []
}
getDictClsData()

// 清空详情
const clearContent = () => {
  _state.contentTableData = []
  _state.currentData = null
}

const search = async () => {
  clearContent()
  state.tableLoading = true
  try {
    const data = await DictApi.getDictCatalogList(_state.queryForm)
    state.tableData = data || []
  } finally {
    state.tableLoading = false
  }
}
search()

const addContentInit = () => {
  _state.isContent = true
  handleAdd('创建字典详情')
}

const editContentInit = async (row: IBaseObj) => {
  _state.isContent = true
  const ret = await DictApi.getDictContentById(row.id)
  if (ret.data) {
    handleEdit('修改字典详情')

    _state.dictContentForm = ret.data
  }
}

const delContent = (row: IBaseObj) => {
  handleDelete({
    url: DictApi.delContentUrl,
    id: row.id,
    message: '此操作将永久删除该字典详情，是否继续?',
    success: () => {
      searchContentInit(_state.currentData)
    },
  })
}

const dictSelectionChange = (row: IBaseObj) => {
  _state.currentData = row
  searchContentInit(row)
}

const searchContentInit = async (row: IBaseObj) => {
  if (row) {
    _state.contentTableLoading = true
    const params = {
      id: row.id,
      pageNum: _state.contentPageObj.pageNum,
      pageSize: _state.contentPageObj.pageSize,
    }
    const ret = await DictApi.getDictContentByPage(params)
    _state.contentTableLoading = false
    if (ret.data) {
      const { total, records } = ret.data
      _state.contentTableData = records
      _state.contentTableData.forEach((item: IBaseObj) => {
        item.lockUp = item.lockUp === true ? '√' : '×'
      })
      _state.contentPageObj.total = total
      // this.setContentTableHeight()
    } else {
      _state.contentTableData = []
    }
  }
}

const contentPageChange = () => {
  searchContentInit(_state.currentData)
}

const closeDrawer = () => {
  state.isAdd = true
  addOrEditReset()
}

const confirm = () => {
  handleClose()
  search()
}

const confirmContent = () => {
  handleClose()
  addOrEditReset()
  searchContentInit(_state.currentData)
}

const formWrapper = ref()
const addOrEditReset = () => {
  formWrapper.value.clear()
  if (_state.isContent) {
    _state.dictContentForm = {
      value: '',
      valueOth1: '',
      valueOth2: '',
      lockUp: false,
      remark: '',
    }
  } else {
    _state.dictForm = {
      value: '',
      code: '',
      typeFk: '',
      status: 1,
      lockUp: false,
      remark: '',
    }
  }
}
</script>

<style lang="scss">
.pl10 {
  padding-left: 10px;
}

.pr10 {
  padding-right: 10px;
}
</style>

<style lang="scss" scoped>
.search-wrap {
  display: flex;
  align-items: center;
}

.content-title {
  display: flex;
  height: 60px;
  padding: 0 20px;
  font-size: 16px;
  line-height: 60px;
  justify-content: space-between;
  align-items: center;
  color: var(--color-1);
  // border-bottom: 1px solid var(--table-border);
}

.dict-table {
  padding-bottom: 10px;

  :deep() {
    .el-table__header-wrapper {
      display: none;
    }
  }
}
</style>
